<template>
  <view class="container">
    <view class="header-bar">
      <text class="header-title">复利计算器</text>
    </view>
    <!-- <view class="card card-form">
      <view class="ind_from">
        <view class="row">
          <view class="label">计算项目</view>
          <view class="value">
            <picker :range="calcTypeOptions" v-model="formData.calcTypeIndex">
              <view class="picker picker-card">
                {{ calcTypeOptions[formData.calcTypeIndex] }}
              </view>
            </picker>
          </view>
        </view>
        <view class="row" v-if="formData.calcTypeIndex === 0">
          <view class="label">存入本金(现值)</view>
          <view class="value">
            <input
              class="input right-align input-card"
              v-model="formData.principal"
              type="number"
              placeholder="请输入本金"
              @input="onInputNumber('principal', $event)"
              min="0"
            />
          </view>
        </view>
        <view class="row" v-else>
          <view class="label">本息合计(终值)</view>
          <view class="value">
            <input
              class="input right-align input-card"
              v-model="formData.totalValue"
              type="number"
              placeholder="请输入本息合计"
              @input="onInputNumber('totalValue', $event)"
              min="0"
            />
          </view>
        </view>
        <view class="row">
          <view class="label">利率</view>
          <view class="value" style="display:flex;align-items:center;">
            <picker :range="rateTypeOptions" v-model="formData.rateTypeIndex">
              <view class="picker picker-card" style="margin-right:8px;">
                {{ rateTypeOptions[formData.rateTypeIndex] }}
              </view>
            </picker>
            <input
              class="input right-align input-card"
              v-model.number="formData.rate"
              type="number"
              placeholder="请输入利率"
              @input="onInputNumber('rate', $event)"
              min="0"
            />
            <text style="margin-left:4px;">%</text>
          </view>
        </view>
        <view class="row">
          <view class="label">存入期数</view>
          <view class="value">
            <input
              class="input right-align input-card"
              v-model="formData.years"
              type="number"
              placeholder="请输入期数"
              @input="onInputNumber('years', $event)"
              min="0"
            />
            <picker :range="periodTypeOptions" v-model="formData.periodTypeIndex">
              <view class="picker picker-card">
                {{ periodTypeOptions[formData.periodTypeIndex] }}
              </view>
            </picker>
          </view>
        </view>
        <view class="row">
          <view class="label">复利方式</view>
          <view class="value">
            <picker :range="compoundingOptions" v-model="formData.compoundingIndex">
              <view class="picker picker-card">
                {{ compoundingOptions[formData.compoundingIndex] }}
              </view>
            </picker>
          </view>
        </view>
      </view>
    </view>
    <view class="card card-btn">
      <view class="btn big-btn" :class="{disabled: !canSubmit}" @click="canSubmit && submit()">{{
        isUnlock ? "计算" : "看广告获取计算结果"
      }}</view>
    </view>
    <view v-if="showResult" class="card card-result new-result-card">
      <view class="result-title">{{formData.calcTypeIndex === 0 ? '本息合计(终值)' : '存入本金(现值)'}} </view>
      <view class="result-value-area">
        <text class="result-value">{{ result.total }}</text>
        <text class="result-unit">元</text>
      </view>
      <view class="result-label">{{formData.calcTypeIndex === 0 ? '最终本息合计' : '需要存入的本金'}}</view>
      <view class="result-section param-section">
        <view class="param-title">主要参数</view>
        <view class="param-table">
          <view class="param-row"><text>本金：</text><text>{{ result.detail.本金 !== undefined ? result.detail.本金 : '-' }}</text></view>
          <view class="param-row"><text>终值：</text><text>{{ result.detail.终值 !== undefined ? result.detail.终值 : '-' }}</text></view>
          <view class="param-row"><text>利率：</text><text>{{ result.detail.利率 }}</text></view>
          <view class="param-row"><text>复利频率：</text><text>{{ result.detail.复利频率 }}</text></view>
          <view class="param-row"><text>期数：</text><text>{{ result.detail.期数 }}</text></view>
        </view>
      </view>
      <view class="result-section formula-section">
        <view class="formula-title">计算公式</view>
        <view class="formula-content">{{ result.detail.公式 }}</view>
      </view>
      <view class="result-section step-section">
        <view class="step-title">详细计算步骤</view>
        <view class="step-content">{{ result.detail.计算 }}</view>
      </view>
      <view class="compare-tip">温馨提示：复利计算结果仅供参考，实际收益以银行/平台为准。</view>
    </view> -->
    <view class="pub_ad_banner">
      <!-- #ifdef MP-TOUTIAO -->
      <ad
        :unit-id="adBannerIdDouyin"
        :ad-intervals="30"
        :fixed="false"
        type="banner"
        scale="100"
      />
      <!-- #endif -->
      <!-- #ifdef MP-KUAISHOU -->
      <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      isUnlock: false,
      calcTypeOptions: ["复利终值(计算收益)", "复利现值(反算本金)"],
      rateTypeOptions: ["年利率", "月利率", "日利率"],
      periodTypeOptions: ["年", "月", "天"],
      compoundingOptions: ["按年复利", "按月复利", "按日复利"],
      formData: {
        calcTypeIndex: 0,
        principal: "",
        totalValue: "",
        rate: "",
        rateTypeIndex: 0,
        years: "",
        periodTypeIndex: 0,
        compoundingIndex: 0,
      },
      result: {
        total: "",
        detail: {},
      },
      canSubmit: false,
    };
  },
  // watch: {
  //   formData: {
  //     handler: function () {
  //       this.canSubmit = this.checkFormValid();
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
    // onInputNumber(field, e) {
    //   let val = e.detail.value.replace(/^0+(?!$)/, '');
    //   if (val && Number(val) < 0) val = '';
    //   this.formData[field] = val;
    // },
    // checkFormValid() {
    //   if (this.formData.calcTypeIndex === 0) {
    //     return (
    //       this.formData.principal !== '' &&
    //       this.formData.rate !== '' &&
    //       this.formData.years !== ''
    //     );
    //   } else {
    //     return (
    //       this.formData.totalValue !== '' &&
    //       this.formData.rate !== '' &&
    //       this.formData.years !== ''
    //     );
    //   }
    // },
    // getCompoundingParams() {
    //   let n = 1;
    //   if (this.formData.compoundingIndex === 0) n = 1;
    //   else if (this.formData.compoundingIndex === 1) n = 12;
    //   else n = 365;
    //   return n;
    // },
    // getRateValue() {
    //   let rate = Number(this.formData.rate);
    //   if (this.formData.rateTypeIndex === 0) return rate / 100;
    //   if (this.formData.rateTypeIndex === 1) return rate / 100;
    //   return rate / 100;
    // },
    // getPeriodValue() {
    //   let period = Number(this.formData.years);
    //   if (this.formData.periodTypeIndex === 0) return period;
    //   if (this.formData.periodTypeIndex === 1) return period / 12;
    //   return period / 365;
    // },
    // calculate() {
    //   const precision = 4;
    //   let n = this.getCompoundingParams();
    //   let i = this.getRateValue();
    //   let t = this.getPeriodValue();
    //   let principal = Number(this.formData.principal);
    //   let totalValue = Number(this.formData.totalValue);
    //   let amount = 0;
    //   let formula = '';
    //   let calcDetail = {};
    //   if (this.formData.calcTypeIndex === 0) {
    //     amount = principal * Math.pow(1 + i / n, n * t);
    //     formula = `终值 = 本金 × (1 + 利率/复利频率)^(复利频率×期数)`;
    //     calcDetail = {
    //       本金: principal,
    //       利率: i,
    //       复利频率: n,
    //       期数: t,
    //       公式: formula,
    //       计算: `${principal} × (1 + ${i} / ${n})^(${n} × ${t}) = ${amount.toFixed(precision)}`
    //     };
    //   } else {
    //     amount = totalValue / Math.pow(1 + i / n, n * t);
    //     formula = `本金 = 终值 ÷ (1 + 利率/复利频率)^(复利频率×期数)`;
    //     calcDetail = {
    //       终值: totalValue,
    //       利率: i,
    //       复利频率: n,
    //       期数: t,
    //       公式: formula,
    //       计算: `${totalValue} ÷ (1 + ${i} / ${n})^(${n} × ${t}) = ${amount.toFixed(precision)}`
    //     };
    //   }
    //   this.result.total = amount.toFixed(precision);
    //   this.result.detail = calcDetail;
    //   this.showResult = true;
    // },
    // getResult() {
    //   this.calculate();
    //   this.isUnlock = true;
    // },
    // submit() {
    //   if (this.formData.calcTypeIndex === 0 && this.formData.principal == "") {
    //     this.global.toast("请输入本金");
    //     return;
    //   }
    //   if (this.formData.calcTypeIndex === 1 && this.formData.totalValue == "") {
    //     this.global.toast("请输入本息合计");
    //     return;
    //   }
    //   if (this.formData.rate == "") {
    //     this.global.toast("请输入利率");
    //     return;
    //   }
    //   if (this.formData.years == "") {
    //     this.global.toast("请输入期数");
    //     return;
    //   }
    //   if (!this.isUnlock) {
    //     showAdConfirmModal(() => {
    //       try {
    //         adVideoShow(() => {
    //           this.getResult();
    //         });
    //       } catch (error) {
    //         this.getResult();
    //       }
    //     });
    //   } else {
    //     this.getResult();
    //   }
    // },
  },
};
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background: #f4f7fb;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
}
.header-bar {
  width: 100%;
  background: linear-gradient(90deg, #3a7afe 0%, #6f6fff 100%);
  padding: 36rpx 0 24rpx 0;
  text-align: center;
  border-radius: 0 0 18px 18px;
  margin-bottom: 24rpx;
  box-shadow: 0 2px 8px 0 rgba(58,122,254,0.08);
}
.header-title {
  color: #fff;
  font-size: 40rpx;
  font-weight: bold;
  letter-spacing: 2px;
}
.card {
  background: #fff;
  border-radius: 18px;
  margin: 18rpx 0;
  width: 92vw;
  max-width: 600px;
  padding: 32rpx 28rpx;
}
.card-form {
  margin-top: 0;
  margin-bottom: 0;
}
.card-btn {
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0;
}
.card-result {
  background: #f9f5ef;
  border: 2px solid #3a7afe;
  margin-top: 10px;
  padding: 32rpx 28rpx 18rpx 28rpx;
}
.ind_from .row {
  padding: 18rpx 10rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  &:last-child {
    border-bottom: 0;
  }
  .label {
    width: 150px;
    flex-shrink: 0;
    color: #333;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    .icon {
      font-size: 32rpx;
      margin-right: 8rpx;
    }
  }
  .value {
    width: 100%;
    display: flex;
    align-items: center;
    picker{
      display: block;
      width: 100%;
    }
    .input-card {
      border: 1.5px solid #e0e6ed;
      border-radius: 10px;
      height: 44px;
      font-size: 28rpx;
      padding: 0 16px;
      background: #f8fafc;
      transition: border 0.2s;
      width:100%;
      display: block;
      text-align: left;
    }
    .input-card:focus {
      border: 1.5px solid #3a7afe;
      background: #fff;
    }
  }
}
.picker-card {
  box-sizing: border-box;
  border: 1.5px solid #e0e6ed;
  width: 100%;
  border-radius: 10px;
  padding: 0 18px;
  min-width: 90px;
  height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  background: #f8fafc;
  font-size: 28rpx;
}
.picker-card:after {
  content: '';
  display: inline-block;
  border: 8px solid transparent;
  border-top: 8px solid #999;
  margin-left: 10px;
  position: absolute;
  top: 43%;
  right: 14px;
}
.input.right-align {
  text-align: right;
}
.btn.big-btn {
  margin-top: 30rpx;
  background: linear-gradient(90deg, #3a7afe 0%, #6f6fff 100%);
  color: #fff;
  text-align: center;
  padding: 22rpx 0;
  border-radius: 12px;
  font-size: 36rpx;
  font-weight: bold;
  box-shadow: 0 4px 16px 0 rgba(58,122,254,0.12);
  transition: background 0.2s;
}
.btn.disabled {
  background: #ccc !important;
  color: #fff;
  box-shadow: none;
}
.result .strong.highlight {
  color: #ff1afe;
  font-size: 54rpx;
  font-weight: bold;
}
.result .unit {
  font-size: 28rpx;
  margin-left: 8px;
  color: #888;
}
.result .tip {
  text-align: center;
  color: #666;
  font-size: 24rpx;
  margin-top: 12px;
}
.card-result .compare-tip {
  margin-top: 18px;
  color: #b39569;
  font-size: 22rpx;
  text-align: center;
}
@media (max-width: 600px) {
  .card {
    width: 98vw;
    padding: 18rpx 8rpx;
  }
  .header-title {
    font-size: 32rpx;
  }
}
.new-result-card {
  background: #f9f5ef;
  border: 2px solid #3a7afe;
  margin-top: 10px;
  padding: 32rpx 18rpx 18rpx 18rpx;
  border-radius: 18px;
  box-shadow: 0 2px 12px 0 rgba(58,122,254,0.08);
}
.result-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #3a7afe;
  text-align: center;
  margin-bottom: 10px;
}
.result-value-area {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 6px;
}
.result-value {
  color: #ff1afe;
  font-size: 60rpx;
  font-weight: bold;
  margin-right: 8px;
}
.result-unit {
  font-size: 28rpx;
  color: #888;
}
.result-label {
  text-align: center;
  color: #666;
  font-size: 26rpx;
  margin-bottom: 18px;
}
.result-section {
  margin-bottom: 14px;
  background: #fffbe8;
  border-radius: 12px;
  padding: 14px 12px 10px 12px;
  box-shadow: 0 1px 4px 0 rgba(58,122,254,0.04);
}
.param-title, .formula-title, .step-title {
  font-weight: bold;
  color: #b39569;
  margin-bottom: 6px;
  font-size: 24rpx;
}
.param-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.param-row {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #444;
  padding: 2px 0;
}
.formula-section, .step-section {
  background: #f4f7fb;
  border-left: 4px solid #3a7afe;
  margin-bottom: 10px;
}
.formula-content, .step-content {
  color: #222;
  font-size: 24rpx;
  padding-left: 8px;
  word-break: break-all;
}
.compare-tip {
  margin-top: 18px;
  color: #b39569;
  font-size: 22rpx;
  text-align: center;
}
</style>